<template>
    <div class="addStudentsBox">
        <!-- 搜索栏 -->
        <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
              <input type="text" placeholder="搜索">
              <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div>
        <!-- 搜索栏 end-->

        <!-- header -->  
        <adminHeader></adminHeader>      
        <!-- header -->

        <!-- 添加学员 -->
        <div class="studentBox">
            <div class="studentHeader">
                <h3>添加学员</h3>
                <div></div>
            </div>

            <table class="student-content">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" label="全选" name="type" v-model="isCheckAll" @change="checkedAll">
                        </th>
                        <th>头像</th>
                        <th>账号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>职位</th>
                        <th>创建时间</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="list in studentData" :key="list.id">
                        <td>
                            
                            <input type="checkbox" :value='list.id' v-model="checkedLists">
                        </td>
                        <td>
                            <img :src="list.imgSrc" alt="">
                        </td>
                        <td>{{list.phone}}</td>
                        <td>{{list.name}}</td>
                        <td>{{list.age}}</td>
                        <td>{{list.sex}}</td>
                        <td>{{list.job}}</td>
                        <td>{{list.createTime}}</td>
                    </tr>
                </tbody>
            </table>
            <div>全选/取消 状态：{{ isCheckAll }}</div>
             <div>选中列表：{{ checkedLists }}</div>
            <!-- 分页 -->
            <el-pagination   v-show="studentData!=0"  background layout="prev, pager, next" :total="total" ></el-pagination>
            <!-- 分页 end-->
            
            <button class="joinUs">加入</button>

        </div>
        <!-- 添加学员 end-->
    </div>
</template>
<script>
import adminHeader from '../components/adminHeader.vue'
    export default {
        components:{
            adminHeader:adminHeader
        },
        data(){
            return{
                // 是否全选
                isCheckAll:false,
                //
                checkedLists:[],
                // 学员数据
                studentData:[
                    {
                        id:1,
                        imgSrc:'../../static/image/icon-default-avatar-large.png',
                        phone:'15795879500',
                        name:'张三',
                        age:'100',
                        sex:'男',
                        job:'ceo',
                        createTime:'2018/06/29'
                    },
                    {
                        id:2,
                        imgSrc:'../../static/image/icon-default-avatar-large.png',
                        phone:'15795879500',
                        name:'张三',
                        age:'100',
                        sex:'男',
                        job:'ceo',
                        createTime:'2018/06/29'
                    },
                    {
                        id:3,
                        imgSrc:'../../static/image/icon-default-avatar-large.png',
                        phone:'15795879500',
                        name:'张三',
                        age:'100',
                        sex:'男',
                        job:'ceo',
                        createTime:'2018/06/29'
                    },
                ],
                // 总条数
                total:30,
            }
        },
        methods:{
            checkedAll () {
                // 判断 全选/反选 是否点击
                if (this.isCheckAll) {
                    let arr = []
                    // 循环全部数据并push到一个数组中
                    this.studentData.forEach(element => {
                        arr.push(element.id)
                    });
                    // 选中列表赋值，此时的arr已经是全部数据了，直接赋值就等于选中所有checkbox
                    this.checkedLists = arr
                } else {
                    // 如果 全选/反选 为假，则选中列表初始化
                    this.checkedLists = []
                }
            }
        },
         watch: {
            // 监听选中列表属性，当选中列表发生变化时，会运行此方法
            checkedLists (newValue, oldValue) {
                // 每次运行时，判断当前选中列表中的数组个数是否等于全部数据的数组个数，如果到某一时刻全等，则全选按钮为选中
                if (newValue.length === this.studentData.length) {
                    this.isCheckAll = true
                } else {
                    // 否则为取消
                    this.isCheckAll = false
                }
            }
        }       
    }
</script>

